﻿@model SevenSpikes.Nop.Plugins.CloudZoom.Models.CloudZoomModel
@{
    string cssFile = Url.Content("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Scripts/cloud-zoom.1.0.2/cloud-zoom.css");
    Html.AddCssFileParts(cssFile);

    string jsFile = Url.Content("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js");
    Html.AddScriptParts(jsFile);
}
<div class="picture">
    <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
        <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" />
    </a>
    @if (Model.Pictures.Count > 1)
    {
        foreach (var picture in Model.Pictures)
        {

        <a href="@picture.FullSizeImageUrl" class="cloud-zoom-gallery" title="@picture.Title" rel="@picture.GalleryRelation">
            <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
        </a>

        }
    }
</div>
